<template>
	<view @tap="hideMore">
		<view class="flex flex-x-space-between p-4 bg-white" :style="[`opacity:${opacity.navbar}`]">
			<view class="flex flex-center grid-gap-2">
				<x-city class="font-weight-500 h8 text-ellipsis-1" style="max-width:calc(100% - 15px)" />
				<image src="/static/icons/arrow-down.png" mode="aspectFit" class="x-navbar-icons-image"
					style="width: 7px; height: 6px;" />
			</view>
			<view class="flex bg-dark-light-9 text-dark h10 font-weight-600 rounded-4" @tap="toggleViewRole">
				<text class="py-2 px-4 rounded-4"
					:class="[search.view_role === 'public' ? 'text-white bg-primary' : '']">动态</text>
				<text class="py-2 px-4 rounded-4"
					:class="[search.view_role === 'fans' ? 'text-white bg-primary' : '']">关注</text>
			</view>
		</view>
		<!-- 记录列表 -->
		<view class="flex flex-column grid-gap-4 list" v-if="list.length > 0">
			<view class="p-4 list-item border-top" v-for="(item,index) in list" :key="index">
				<x-moments-item :item="item" :tap-num="tapNum">
					<template #collect>
						<view class="p-2 flex flex-center grid-gap-1" v-if="!item.is_collect" @tap="collect(item,index)">
							<uni-icons type="heart" color="var(--xl-primary)"></uni-icons>
							<text class="h10 text-primary">关注</text>
						</view>
					</template>
					<template #more>
						<view class="flex-1 p-2 flex flex-center grid-gap-1" @tap="like(item,index)">
							<template v-if="item.is_like">
								<uni-icons type="hand-up-filled" color="var(--xl-primary)"></uni-icons>
								<text class="h10 text-primary text-nowrap">取消</text>
							</template>
							<template v-else>
								<uni-icons type="hand-up" color="var(--xl-primary)"></uni-icons>
								<text class="h10 text-primary text-nowrap">赞</text>
							</template>
						</view>
						<!-- <view class="flex-1 p-2 flex flex-center grid-gap-1">
							<uni-icons type="chat-filled" color="var(--xl-primary)"></uni-icons>
							<text class="h10 text-primary text-nowrap">评论</text>
						</view> -->
					</template>
				</x-moments-item>
			</view>
			<x-more :status="loading" @load="getList()"></x-more>
		</view>
		<view v-else class="vh-50 flex flex-center">
			<x-empty type="log" text="暂无动态"></x-empty>
		</view>
		<x-tabbar @reload="handleReload"></x-tabbar>
	</view>
</template>

<script setup lang="ts">
import { ref, watch, nextTick } from 'vue';
import { $api, $message, $page, $helper } from '@/utils';
import { onPageScroll, onLoad, onReachBottom, onPullDownRefresh, onUnload, onShow } from '@dcloudio/uni-app';
import { useUserStore,useRefs } from "@/stores";
import { $EventName } from '@/utils/const/env';
const UserStore = useUserStore();
const {USERINFO}=useRefs(UserStore);
const opacity = ref<{
	navbar: number
}>({
	navbar: 1
});
const top = ref(0);
watch(() => top.value, (val: number) => {
	if (val > 0) {
		opacity.value.navbar = 1;
	} else {
		opacity.value.navbar = 1 - (Math.abs(val) / 100);
	}
})
onPageScroll(({ scrollTop }: { scrollTop: number }) => {
	top.value = scrollTop;
	hideMore();
})
const loading = ref('loadmore');
const search = ref({
	page: 1,
	limit: 10,
	view_role: 'public',
})
const list = ref([]);
const getList = () => {
	if (loading.value === 'loading' || loading.value === 'nomore') return;
	loading.value = 'loading';
	$api.Moments.list(search.value).then((data: any) => {
		list.value = [...list.value, ...data.data];
		search.value.page++;
		if (data.current_page >= data.last_page) {
			nextTick(() => {
				loading.value = 'nomore';
			})
		}
	}).catch(() => {
		nextTick(() => {
			loading.value = 'nomore';
		})
	}).finally(() => {
		if (loading.value === 'loading') {
			loading.value = 'loadmore';
		}
		uni.stopPullDownRefresh();
	})
}
const toggleViewRole = () => {
	if (!UserStore.hasLogin()) {
		return $page.open('/pages/login/login');
	}
	search.value.view_role = search.value.view_role === 'public' ? 'fans' : 'public';
	search.value.page = 1;
	list.value = [];
	loading.value = 'loadmore';
	getList();
}
const collect = (item: any,index:number) => {
	if (!UserStore.hasLogin()) {
		return $page.open('/pages/login/login');
	}
	$api.Collect.technician(item.uid).then((data: any) => {
		list.value.forEach((find: any) => {
			if (find.uid === item.uid) {
				find.is_collect = data.state;
			}
		})
	}).catch((err: any) => {
		$message.error(err.msg);
	})
}
const like=(item:any,index:number)=>{
	if (!UserStore.hasLogin()) {
		return $page.open('/pages/login/login');
	}
	$api.Moments.like({id:item.id}).then((res: any) => {
		item.is_like = res.data.state;
		if(res.data.state){
			item.like_list.push({uid:USERINFO.value.id,nickname:USERINFO.value.nickname});
		}else{
			item.like_list=item.like_list.filter((find:any)=>find.uid!==USERINFO.value.id);
		}
	}).catch((err: any) => {
		$message.error(err.msg);
	})

}
const handleReload = () => {
	search.value.page = 1;
	list.value = [];
	loading.value = 'loadmore';
	getList();
}
const tapNum = ref(0);
const hideMore = () => {
	tapNum.value++;
	if(tapNum.value>1000000){
		tapNum.value=0;
	}
}
onPullDownRefresh(() => {
	handleReload();
})
onLoad(() => {
	getList();
	uni.$on($EventName.X_CITY_CHANGE, handleReload);
})
onUnload(() => {
	uni.$off($EventName.X_CITY_CHANGE, handleReload);
})
onReachBottom(() => {
	getList();
})
onShow(() => {
	// #ifdef H5
	$helper.replaceUrlParam('appid', $helper.appid());
	// #endif
})
</script>

<style lang="scss" scoped>
.list {
	&-item:nth-child(1) {
		border-top: 0;
	}
}
</style>
